/**
*   @description    栅格内容展示组件
*   @pargram    labelOPtion: grid展示的配置参数
*   @return
 */
<template>
    <div class="GridShow">
        <div class="title">
            <div class = "titleTip"></div>
            <div class = "titleContent" v-text = "title"></div>
            <div class = "subTitle" v-text = "subTitle"></div>
        </div>
        <div class="content">
            <el-row>
                <el-col v-for="(item, index) in labelOPtion" :key = "index" :span = item.span :style="{height: item.height,display: 'flex', alignItems: 'center'}">
                    <div class="labelContiner" :style="{width: item.labelWidth, lineHeight: item.height}">
                        <span v-text="item.label"></span>
                    </div>
                    <div class="contentContiner" v-if = "item.valueRender" :style="{height: item.height,overflow:item.prop === 'opinion' ? 'auto' : 'hidden'}">
                        <ex-slot :render = "item.valueRender" :row = "item" :index="index"  :style="{height: item.height}"/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
let exSlot = {
    functional: true,
    props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
        type: Object,
        default: null
    }
    },
    render: (h, data) => {
        const params = {
            row: data.props.row,
            index: data.props.index
        }
        if (data.props.column) params.column = data.props.column
        return data.props.render(h, params)
    }
}
export default {
    components: { exSlot },
    props: {
        title:{
            type: String,
            default:'',
        },
        subTitle:{
            type: String,
            default:'',
        },
        labelOPtion: {
            type: Array,
            default:() => {
                return []
            }
        },
        gridData: {
            type: Object,
            defult: () => {
                return {}
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .GridShow{
        background: #fff;
        .title {
            display: flex;
            padding: 20px;
            align-items: center;
            .titleTip {
                width: 4px;
                height: 14px;
                background: #3D7fff;
                margin-right: 10px;
            }
            .titleContent {
                font-weight: 600;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
            }
            .subTitle {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 17px;
                margin-left: 12px;
                flex: 1;
            }
        }
        .content{
            padding: 20px;
            .labelContiner {
                background: #FAFAFA;
                padding: 0 10px;
                border: 1px solid #E8E8E8;
                font-weight: 500;
                color: #333333;
            }
            .contentContiner {
                padding: 0 10px;
                font-weight: 400;
                border: 1px solid #E8E8E8;
                flex:1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
</style>